import React, { useState } from 'react';
import { Layout, Menu } from 'antd';
import { Link } from 'umi';

import './BasicLayout.less';

const { Header } = Layout;

const BasicLayout: React.FC<any> = (props: any) => {
  const { location, children } = props;
  const key = location.pathname;
  const [selectedKey] = useState(key);
  return (
    <Layout className="layout">
      <Header>
        <div className="logo" />
        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={[selectedKey]}>
          <Menu.Item key="/normal-table">
            <Link to="/normal-table">数据展示</Link>
          </Menu.Item>
          <Menu.Item key="/normal-test">
            <Link to="/normal-test">实验性</Link>
          </Menu.Item>
          <Menu.Item key="/customer">
            <Link to="/customer">客户管理</Link>
          </Menu.Item>
          <Menu.Item key="/recharts">
            <Link to="/recharts">资源图</Link>
          </Menu.Item>
        </Menu>
      </Header>
      <div className="site-layout-content">{children}</div>
    </Layout>
  );
};

export default BasicLayout;
